<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿百度注册</title>
    <link rel="stylesheet" href="register.css">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

</head>
<body>
<form>
    <div class="register">
        <div>
            <label>用户名</label><input id="username" value="" onclick="click11()" onblur="click1();click2();click10()" type="text"
                                     placeholder="请设置用户名">
            <img src="" id="id1">
            <span id="one">
            </span>
        </div>
        <div>
            <label>手机号</label><input id="phone" onclick="click21()" onblur="click4();click20();click3();checkRate(input);" type="text" placeholder="请填写手机号">
            <img src="" id="id2" style="float: right">
            <span id="two">
            </span>
        </div>
        <div>
            <label>密码</label><input id="password" onclick="click31()" onblur="click5();click30()" type="text"
                                    placeholder="请设置用户密码">
            <img src="" id="id3">
            <span id="three">
        </span>
        </div>
        <div>
            <label>验证码</label>
            <input type="text" placeholder="验证码" style="width: 205px">
            <input type="button" value="点击获取验证码" style="width: 143px">
        </div>

        <p style="margin-left: 75px;font-size: 12px">
            <input type="checkbox" value="none" required="required">阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
        </p>

        <p style="margin-left: 75px;">
            <input type="button" value="注册" style="background-color: #3498cd">
        </p>
    </div>

</form>
</body>
</html>
<script>
    function click1() {
        var temp = $('#username').val();
        if (temp === "")
            document.getElementById('id1').src = "";
        else if (temp.length >= 7 && temp.length <= 14)
            document.getElementById('id1').src = "ok_small.png"
    }
    function click2() {
        var temp = $('#username').val();
        if (temp === "")
            document.getElementById("id1").src = "";
        else if(temp.length < 7 || temp.length > 14)
            document.getElementById('id1').src = "err_small.png"
    }
    function click11() {
        var temp = $('#username').val();
        if (temp === "")
            document.getElementById("one").innerHTML = "设置后不可更改\n" +
                "                <br>" +
                "                中英文均可，最长14个英文或7个汉字";
    }
    function click10() {
        var temp = $('#username').val();
        if (temp === "")
            document.getElementById("one").innerHTML = "";
        else if (temp.length < 7 || temp.length > 14)
            document.getElementById("one").innerHTML = "";
        else
            document.getElementById("one").innerHTML = ""
    }
    function click3() {
        var temp = $('#phone').val();
        var x;
        if (temp === "")
            document.getElementById('id2').src = "";
        else if (temp.length !== 11)
            document.getElementById('id2').src = "err_small.png";
        else
            document.getElementById('id2').src = "ok_small.png"

    }
    function click4() {
        var temp = $('#phone').val();
        if (temp === "")
            document.getElementById('id2').src = "";
        else if (temp.length === 11)
            document.getElementById('id2').src = "ok_small.png"

    }
    function click21() {
        var temp = $('#phone').val();
        if (temp === "")
            document.getElementById("two").innerHTML = "请输入中国大陆手机号\n" +
                "                <br>" +
                "                其他用户不可见";
    }
    function click20() {
        var temp = $('#phone').val();
        if (temp === "")
            document.getElementById("two").innerHTML = "";
        else if (temp.length === 11)
            document.getElementById("two").innerHTML = "";
        else
            document.getElementById("two").innerHTML = ""
    }
    function click5() {
        var temp = $('#password').val();
        if (temp === "")
            document.getElementById("id3").src = "";
        else if (temp.indexOf(" ") >=0)
            document.getElementById("id3").src = "err_small.png";
        else if (temp.length <6 || temp.length >14)
            document.getElementById('id3').src = "err_small.png";
        else
            document.getElementById('id3').src = "ok_small.png";
    }
    function click31() {
        var temp = $('#password').val();
        if (temp === "")
            document.getElementById("three").innerHTML = "<ul>\n" +
                "            <li>长度为6~14个字符</li>\n" +
                "            <li>支持数字,大小写字母和标点符号</li>\n" +
                "            <li>不允许有空格</li>\n" +
                "        </ul>"
    }

    function click30() {
        var temp = $('#password').val();
        if (temp === "")
            document.getElementById("three").innerHTML = "";
        else if (temp >= 6 && temp <= 14)
            document.getElementById("three").innerHTML = "";
        else
            document.getElementById("three").innerHTML = "";
    }
</script>


